<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <item-title title="回款信息" />
    <div
      v-if="data"
      class="base-info-view"
    >
      <el-form
        class="form-detail"
        label-position="right"
        label-width="140px"
        style="padding-left:20px;"
      >
        <el-row
          :gutter="20"
          style="width:100%"
        >
          <el-form-item
            label="回款类型："
            style="width: 50%"
          >
            <div>{{ getLabel('returned_money_type', data.returnType) }}</div>
          </el-form-item>
          <el-form-item
            :label="data.returnType==='1'?'回款配送商名称：':'直接回款方名称：'"
            style="width: 50%"
          >
            <div>{{ data.relationName }}</div>
          </el-form-item>
          <el-form-item
            label="付款开户行："
            style="width: 50%"
          >
            <div>{{ data.bankName || '无' }}</div>
          </el-form-item>
          <el-form-item
            label="付款银行账号："
            style="width: 50%"
          >
            <div>{{ data.bankNumber || '无' }}</div>
          </el-form-item>
          <el-form-item
            label="回款金额："
            style="width: 50%"
          >
            <div>{{ data.returnAmount }}</div>
          </el-form-item>
          <el-form-item
            label="到款日期："
            style="width: 50%"
          >
            <div>{{ dateFormat('yyyy-mm-dd', data.returnTime) }}</div>
          </el-form-item>
          <el-form-item
            label="关联回款客户类型："
            style="width: 50%"
          >
            <div>{{ getLabel('returned_money_customer_type', data.customerType) }}</div>
          </el-form-item>
          <el-form-item
            :label="data.customerTitle"
            style="width: 50%"
          >
            <div>{{ data.customerName }}</div>
          </el-form-item>
          <el-form-item
            label="创建人："
            style="width: 50%"
          >
            <div>{{ data.creatorName }}</div>
          </el-form-item>
          <el-form-item
            label="创建时间："
            style="width: 50%"
          >
            <div>{{ dateFormat("yyyy-mm-dd HH:MM", data.createdAt) }}</div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData.data || {},
    })
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data) {
          console.log('====')
          console.log(newval.data)
          console.log('====')
          var obj = newval.data
          if (obj.customerType === 'agent') {
            obj.customerTitle = '回款代理商名称：'
          } else if (obj.customerType === 'agent_person') {
            obj.customerTitle = '回款兼职名称：'
          } else if (obj.customerType === 'terminal') {
            obj.customerTitle = '回款终端名称：'
          }
          reactiveData.detailData = newval
          reactiveData.data = obj
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
